"use client";
import styles from './link.module.css'
import Link from 'next/link'
import NavbarLink from './navbarLink/navbarlink'
import { useState } from 'react'

export default function Links() {
    const links = [
        {
            name: "Home",
            href: "/"
        },
        {
            name: "About",
            href: "/about"
        },
        {
            name: "Contact",
            href: "/contact"
        },
        {
            name: "Blog",
            href: "/blog"
        }

    ]
    const [open, setOpen] = useState(false)

    const session = true;
    const isAdmin = true;

    return (
        <div className={styles.container}>
            <div className={styles.links}>
                {links.map(item => {
                    return (
                        <NavbarLink item={item} key={item.name}></NavbarLink>
                    )
                })}
                {session ?
                    <>{isAdmin && <NavbarLink item={{ name: "Admin", href: "/admin" }}></NavbarLink>}</>
                    : (<NavbarLink item={{ name: "Login", href: "/login" }}></NavbarLink>)}

            </div>
            <button className={styles.menuBtn} onClick={() => setOpen(!open)}>Menu</button>
            {
                open && (
                    <div className={styles.mobileLinks}>
                        {links.map(item => (<NavbarLink item={item} key={item.name}></NavbarLink>))}
                    </div>
                )
            }
        </div>
    )
}